React Portals: Modals en Tooltips Meesteren voor een Verbeterde UX

In de moderne webontwikkeling is het creëren van intuïtieve en boeiende gebruikersinterfaces van het grootste belang. React, een populaire JavaScript-bibliotheek voor het bouwen van gebruikersinterfaces, biedt diverse tools en technieken om dit te bereiken. Een van die krachtige tools is React Portals. Deze blogpost duikt in de wereld van React Portals, met een focus op hun toepassing bij het bouwen van toegankelijke en visueel aantrekkelijke modals en tooltips.

Wat zijn React Portals?

React Portals bieden een manier om de children van een component te renderen in een DOM-node die buiten de DOM-hiërarchie van de bovenliggende component bestaat. In eenvoudiger bewoordingen, het stelt u in staat om los te breken van de standaard React-componentenboom en elementen direct in een ander deel van de HTML-structuur in te voegen. Dit is vooral handig in situaties waar u de stacking context moet beheren of elementen buiten de grenzen van hun bovenliggende container moet positioneren.

Traditioneel worden React-componenten gerenderd als kinderen van hun bovenliggende componenten binnen de DOM. Dit kan soms leiden tot uitdagingen op het gebied van styling en layout, vooral bij elementen zoals modals of tooltips die bovenop andere content moeten verschijnen of gepositioneerd moeten worden ten opzichte van de viewport. React Portals bieden een oplossing door deze elementen direct in een ander deel van de DOM-boom te laten renderen, waardoor deze beperkingen worden omzeild.

Waarom React Portals gebruiken?

Verschillende belangrijke voordelen maken React Portals een waardevol instrument in uw React-ontwikkelingsarsenaal:

• Verbeterde Styling en Lay-out: Portals stellen u in staat om elementen buiten de container van hun parent te positioneren, waardoor stylingproblemen veroorzaakt door overflow: hidden, z-index beperkingen of complexe lay-outbeperkingen worden overwonnen. Stel u een modal voor die het hele scherm moet bedekken, zelfs als de bovenliggende container overflow: hidden heeft ingesteld. Portals stellen u in staat om de modal rechtstreeks in de body te renderen, waardoor deze beperking wordt omzeild.
• Verbeterde Toegankelijkheid: Portals zijn cruciaal voor toegankelijkheid, vooral bij het omgaan met modals. Door de modal-content rechtstreeks in de body te renderen, kunt u eenvoudig focus trapping beheren, zodat gebruikers die schermlezers of toetsenbordnavigatie gebruiken binnen de modal blijven terwijl deze geopend is. Dit is essentieel voor het bieden van een naadloze en toegankelijke gebruikerservaring.
• Schonere Componentstructuur: Door modal- of tooltip-content buiten de hoofdcomponentenboom te renderen, kunt u uw componentstructuur schoner en beter beheersbaar houden. Deze scheiding van verantwoordelijkheden kan uw code gemakkelijker te lezen, te begrijpen en te onderhouden maken.
• Vermijden van Stacking Context Problemen: Stacking contexts in CSS kunnen notoir moeilijk te beheren zijn. Portals helpen u deze problemen te vermijden door u in staat te stellen elementen direct in de root van de DOM te renderen, zodat ze altijd correct gepositioneerd zijn ten opzichte van andere elementen op de pagina.

Modals implementeren met React Portals

Modals zijn een veelgebruikt UI-patroon om belangrijke informatie weer te geven of gebruikers om invoer te vragen. Laten we onderzoeken hoe u een modal kunt maken met React Portals.

1. De Portal Root aanmaken

Eerst moet u een DOM-node aanmaken waar de modal zal worden gerenderd. Dit wordt doorgaans gedaan door een div-element met een specifieke ID toe te voegen aan uw HTML-bestand (meestal in de body):

            <div id="modal-root"></div>
            

              
                Copy
              
            
          

2. De Modal Component aanmaken

Maak vervolgens een React-component die de modal vertegenwoordigt. Deze component bevat de content en de logica van de modal.

            import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ isOpen, onClose, children }) => {
  const [mounted, setMounted] = useState(false);
  const modalRoot = useRef(document.getElementById('modal-root'));

  useEffect(() => {
    setMounted(true);
    return () => setMounted(false);
  }, []);

  if (!isOpen) return null;

  const modalContent = (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        {children}
        <button onClick={onClose}>Close</button>
      </div>
    </div>
  );

  return mounted && modalRoot.current
    ? ReactDOM.createPortal(modalContent, modalRoot.current)
    : null;
};

export default Modal;

            

              
                Copy
              
            
          

Uitleg:

• isOpen prop: Bepaalt of de modal zichtbaar is.
• onClose prop: Een functie om de modal te sluiten.
• children prop: De content die binnen de modal moet worden weergegeven.
• modalRoot ref: Verwijst naar de DOM-node waar de modal zal worden gerenderd (#modal-root).
• useEffect hook: Zorgt ervoor dat de modal alleen wordt gerenderd nadat de component is gemount om problemen te voorkomen waarbij de portal root niet onmiddellijk beschikbaar is.
• ReactDOM.createPortal: Dit is de sleutel tot het gebruik van React Portals. Het accepteert twee argumenten: het te renderen React-element (modalContent) en de DOM-node waar het moet worden gerenderd (modalRoot.current).
• Klikken op de overlay: Sluit de modal. We gebruiken e.stopPropagation() op de modal-content div om te voorkomen dat klikken binnen de modal deze sluiten.

3. De Modal Component gebruiken

Nu kunt u de Modal-component in uw applicatie gebruiken:

            import React, { useState } from 'react';
import Modal from './Modal';

const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => setIsModalOpen(true);
  const closeModal = () => setIsModalOpen(false);

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>

      <Modal isOpen={isModalOpen} onClose={closeModal}>
        <h2>Modal Content</h2>
        <p>This is the content of the modal.</p>
      </Modal>
    </div>
  );
};

export default App;

            

              
                Copy
              
            
          

Dit voorbeeld laat zien hoe u de zichtbaarheid van de modal kunt beheren met de isOpen prop en de openModal en closeModal functies. De content binnen de <Modal> tags zal binnen de modal worden gerenderd.

4. De Modal stylen

Voeg CSS-stijlen toe om de modal te positioneren en te stylen. Hier is een basisvoorbeeld:

            .modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparante achtergrond */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Zorg ervoor dat het bovenop andere content staat */
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

            

              
                Copy
              
            
          

Uitleg van de CSS:

• position: fixed: Zorgt ervoor dat de modal de hele viewport bedekt, ongeacht het scrollen.
• background-color: rgba(0, 0, 0, 0.5): Creëert een semi-transparante overlay achter de modal.
• display: flex, justify-content: center, align-items: center: Centreert de modal horizontaal en verticaal.
• z-index: 1000: Zorgt ervoor dat de modal bovenop alle andere elementen op de pagina wordt gerenderd.

5. Toegankelijkheidsoverwegingen voor Modals

Toegankelijkheid is cruciaal bij het implementeren van modals. Hier zijn enkele belangrijke overwegingen:

• Focusbeheer: Wanneer de modal opent, moet de focus automatisch worden verplaatst naar een element binnen de modal (bijv. het eerste invoerveld of een sluitknop). Wanneer de modal sluit, moet de focus terugkeren naar het element dat de opening van de modal heeft geactiveerd. Dit wordt vaak bereikt met de useRef hook van React om het eerder gefocuste element op te slaan.
• Toetsenbordnavigatie: Zorg ervoor dat gebruikers door de modal kunnen navigeren met het toetsenbord (Tab-toets). De focus moet binnen de modal worden 'gevangen' (trapped), zodat gebruikers er niet per ongeluk uit kunnen tabben. Bibliotheken zoals react-focus-lock kunnen hierbij helpen.
• ARIA-attributen: Gebruik ARIA-attributen om semantische informatie over de modal aan schermlezers te verstrekken. Gebruik bijvoorbeeld aria-modal="true" op de modal-container en aria-label of aria-labelledby om een beschrijvend label voor de modal te geven.
• Sluitmechanisme: Bied meerdere manieren om de modal te sluiten, zoals een sluitknop, klikken op de overlay of het indrukken van de Escape-toets.

Voorbeeld van Focusbeheer (met useRef):

            import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ isOpen, onClose, children }) => {
  const [mounted, setMounted] = useState(false);
  const modalRoot = useRef(document.getElementById('modal-root'));
  const firstFocusableElement = useRef(null);
  const previouslyFocusedElement = useRef(null);

  useEffect(() => {
    setMounted(true);
    if (isOpen) {
      previouslyFocusedElement.current = document.activeElement;
      if (firstFocusableElement.current) {
        firstFocusableElement.current.focus();
      }

      const handleKeyDown = (event) => {
        if (event.key === 'Escape') {
          onClose();
        }
      };

      document.addEventListener('keydown', handleKeyDown);

      return () => {
        document.removeEventListener('keydown', handleKeyDown);
        if (previouslyFocusedElement.current) {
          previouslyFocusedElement.current.focus();
        }
      };
    }

    return () => setMounted(false);
  }, [isOpen, onClose]);


  if (!isOpen) return null;

  const modalContent = (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <h2>Modal Content</h2>
        <p>This is the content of the modal.</p>
        <input type="text" ref={firstFocusableElement} /> <!-- Eerste focusseerbare element -->
        <button onClick={onClose}>Close</button>
      </div>
    </div>
  );

  return mounted && modalRoot.current
    ? ReactDOM.createPortal(modalContent, modalRoot.current)
    : null;
};

export default Modal;

            

              
                Copy
              
            
          

Uitleg van de Focusbeheer Code:

• previouslyFocusedElement.current: Slaat het element op dat de focus had voordat de modal werd geopend.
• firstFocusableElement.current: Verwijst naar het eerste focusseerbare element *binnen* de modal (in dit voorbeeld een tekstinvoerveld).
• Wanneer de modal opent (isOpen is true):
  • Het momenteel gefocuste element wordt opgeslagen.
  • De focus wordt verplaatst naar firstFocusableElement.current.
  • Er wordt een event listener toegevoegd om te luisteren naar de Escape-toets, die de modal sluit.
• Wanneer de modal sluit (cleanup-functie):
  • De Escape-toets event listener wordt verwijderd.
  • De focus wordt teruggegeven aan het element dat eerder de focus had.

Tooltips implementeren met React Portals

Tooltips zijn kleine, informatieve pop-ups die verschijnen wanneer een gebruiker met de muis over een element beweegt. React Portals kunnen worden gebruikt om tooltips te creëren die correct worden gepositioneerd, ongeacht de styling of lay-out van het bovenliggende element.

1. De Portal Root aanmaken (indien nog niet gedaan)

Als u nog geen portal root voor modals heeft gemaakt, voeg dan een div-element met een specifieke ID toe aan uw HTML-bestand (meestal in de body):

            <div id="tooltip-root"></div>
            

              
                Copy
              
            
          

2. De Tooltip Component aanmaken

            import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const Tooltip = ({ text, children, position = 'top' }) => {
  const [isVisible, setIsVisible] = useState(false);
  const [positionStyle, setPositionStyle] = useState({});
  const [mounted, setMounted] = useState(false);

  const tooltipRoot = useRef(document.getElementById('tooltip-root'));
  const tooltipRef = useRef(null);
  const triggerRef = useRef(null);

  useEffect(() => {
    setMounted(true);
    return () => setMounted(false);
  }, []);

  const handleMouseEnter = () => {
    setIsVisible(true);
    updatePosition();
  };

  const handleMouseLeave = () => {
    setIsVisible(false);
  };

  const updatePosition = () => {
    if (!triggerRef.current || !tooltipRef.current) return;

    const triggerRect = triggerRef.current.getBoundingClientRect();
    const tooltipRect = tooltipRef.current.getBoundingClientRect();

    let top = 0;
    let left = 0;

    switch (position) {
      case 'top':
        top = triggerRect.top - tooltipRect.height - 5; // 5px afstand
        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
        break;
      case 'bottom':
        top = triggerRect.bottom + 5;
        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
        break;
      case 'left':
        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
        left = triggerRect.left - tooltipRect.width - 5;
        break;
      case 'right':
        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
        left = triggerRect.right + 5;
        break;
      default:
        break;
    }

    setPositionStyle({
      top: `${top}px`,
      left: `${left}px`,
    });
  };

  const tooltipContent = isVisible && (
    <div className="tooltip" style={positionStyle} ref={tooltipRef}>
      {text}
    </div>
  );

  return (
    <span
      ref={triggerRef}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      {children}
      {mounted && tooltipRoot.current ? ReactDOM.createPortal(tooltipContent, tooltipRoot.current) : null}
    </span>
  );
};

export default Tooltip;

            

              
                Copy
              
            
          

Uitleg:

• text prop: De tekst die in de tooltip moet worden weergegeven.
• children prop: Het element dat de tooltip activeert (het element waar de gebruiker met de muis overheen beweegt).
• position prop: De positie van de tooltip ten opzichte van het trigger-element ('top', 'bottom', 'left', 'right'). Standaard is dit 'top'.
• isVisible state: Bepaalt de zichtbaarheid van de tooltip.
• tooltipRoot ref: Verwijst naar de DOM-node waar de tooltip zal worden gerenderd (#tooltip-root).
• tooltipRef ref: Verwijst naar het tooltip-element zelf, gebruikt voor het berekenen van de afmetingen.
• triggerRef ref: Verwijst naar het element dat de tooltip activeert (de children).
• handleMouseEnter en handleMouseLeave: Event handlers voor het hoveren over het trigger-element.
• updatePosition: Berekent de juiste positie van de tooltip op basis van de position prop en de afmetingen van de trigger- en tooltip-elementen. Het gebruikt getBoundingClientRect() om de positie en afmetingen van de elementen ten opzichte van de viewport te krijgen.
• ReactDOM.createPortal: Rendert de tooltip-content in de tooltipRoot.

3. De Tooltip Component gebruiken

            import React from 'react';
import Tooltip from './Tooltip';

const App = () => {
  return (
    <div>
      <p>
        Beweeg over deze <Tooltip text="Dit is een tooltip!
Met meerdere regels." 
position="bottom">tekst</Tooltip> om een tooltip te zien.
      </p>

      <button>
        Beweeg <Tooltip text="Knop tooltip" position="top">hier</Tooltip> voor een tooltip.
      </button>
    </div>
  );
};

export default App;

            

              
                Copy
              
            
          

Dit voorbeeld toont hoe u de Tooltip-component kunt gebruiken om tooltips toe te voegen aan tekst en knoppen. U kunt de tekst en positie van de tooltip aanpassen met de text en position props.

4. De Tooltip stylen

Voeg CSS-stijlen toe om de tooltip te positioneren en te stylen. Hier is een basisvoorbeeld:

            .tooltip {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8); /* Donkere achtergrond */
  color: white;
  padding: 5px;
  border-radius: 3px;
  font-size: 12px;
  z-index: 1000; /* Zorg ervoor dat het bovenop andere content staat */
  white-space: pre-line; /* Respecteer regeleindes in de text prop */
}

            

              
                Copy
              
            
          

Uitleg van de CSS:

• position: absolute: Positioneert de tooltip ten opzichte van de tooltip-root. De updatePosition-functie in de React-component berekent de precieze top en left waarden om de tooltip in de buurt van het trigger-element te positioneren.
• background-color: rgba(0, 0, 0, 0.8): Creëert een licht transparante donkere achtergrond voor de tooltip.
• white-space: pre-line: Dit is belangrijk voor het behouden van regeleindes die u mogelijk in de text prop opneemt. Zonder dit zou de tooltip-tekst allemaal op één regel verschijnen.

Globale Overwegingen en Best Practices

Bij het ontwikkelen van React-applicaties voor een wereldwijd publiek, overweeg dan deze best practices:

• Internationalisatie (i18n): Gebruik een bibliotheek zoals react-i18next of FormatJS om vertalingen en lokalisatie af te handelen. Dit stelt u in staat om uw applicatie gemakkelijk aan te passen aan verschillende talen en regio's. Zorg ervoor dat de tekstinhoud van modals en tooltips correct wordt vertaald.
• Rechts-naar-Links (RTL) Ondersteuning: Voor talen die van rechts naar links worden gelezen (bijv. Arabisch, Hebreeuws), zorg ervoor dat uw modals en tooltips correct worden weergegeven. Mogelijk moet u de positionering en styling van elementen aanpassen om RTL-layouts te accommoderen. CSS logische eigenschappen (bijv. margin-inline-start in plaats van margin-left) kunnen hierbij helpen.
• Culturele Gevoeligheid: Wees u bewust van culturele verschillen bij het ontwerpen van uw modals en tooltips. Vermijd het gebruik van afbeeldingen of symbolen die in bepaalde culturen als beledigend of ongepast kunnen worden beschouwd.
• Tijdzones en Datumnotaties: Als uw modals of tooltips datums of tijden weergeven, zorg er dan voor dat ze worden geformatteerd volgens de locale en tijdzone van de gebruiker. Bibliotheken zoals moment.js (hoewel verouderd, nog steeds veel gebruikt) of date-fns kunnen hierbij helpen.
• Toegankelijkheid voor Diverse Vaardigheden: Houd u aan de toegankelijkheidsrichtlijnen (WCAG) om ervoor te zorgen dat uw modals en tooltips bruikbaar zijn voor mensen met een beperking. Dit omvat het verstrekken van alternatieve tekst voor afbeeldingen, het zorgen voor voldoende kleurcontrast en het bieden van ondersteuning voor toetsenbordnavigatie.

Conclusie

React Portals zijn een krachtig hulpmiddel voor het bouwen van flexibele en toegankelijke gebruikersinterfaces. Door te begrijpen hoe u ze effectief kunt gebruiken, kunt u modals en tooltips creëren die de gebruikerservaring verbeteren en de structuur en onderhoudbaarheid van uw React-applicaties ten goede komen. Vergeet niet om prioriteit te geven aan toegankelijkheid en globale overwegingen bij het ontwikkelen voor een divers publiek, zodat uw applicaties inclusief en voor iedereen bruikbaar zijn.

Verder Leren

• React Portals Documentatie
• Web Content Accessibility Guidelines (WCAG)
• react-i18next